<template>
	<div class="pay_all">
	<div class="pay_title">
		<van-icon name="arrow-left" size="22px" style="position: absolute;left: 5px;" @click="back" />
		<p v-if="orderState===1">等待付款</p>
		<p v-if="orderState===6">已取消</p>
	</div>
	<div class="pay_detail">
		<p v-if="orderState===1">应付金额：{{'￥'+order_info.payMoney}}</p>
		<button v-if="orderState===1">去支付</button>
		<button v-if="orderState===6">再次购买</button>
	</div>
	<div class="pay">
		
		<!-- 地址 -->
		<div class="pay_address">
			<van-cell :title="order_info.receiverContact+'  '+order_info.receiverMobile" icon="location-o" :label="order_info.receiverAddress"
				is-link />
		</div>
		<!-- 商品 -->
		<div class="pay_goods_info">
		
			<div class="goods" v-for="item in order_info.skus">
				<div class="goods_img">
					<img :src="item.image" alt="" />
				</div>
		
				<div class="goods_detail">
					<div class="goods_title">
						<p>{{item.name}}</p>
					</div>
		
					<div class="goods_desc">
						<p>{{item.attrsText}}</p>
					</div>
		
					<div class="goods_price">
						<p>￥{{item.realPay}}</p>
		
					</div>
					<div class="goods_num">
						<p>x{{item.quantity}}</p>
		
					</div>
		
				</div>
			</div>
			<!-- 总价 -->
			<div class="pay_price">
				<van-cell title="商品总价" v-model="'￥'+order_info.totalMoney" />
				<van-cell title="运费" v-model="'￥'+order_info.postFee"/>
				<van-cell title="应付金额" v-model="'￥'+order_info.payMoney"/>
			</div>
			<!-- 订单信息 -->
			<div class="pay_order_info">
				  <van-cell title="订单信息" :label="'订单编号:'+order_info.id" />
			</div>
		</div>	
	<!-- 猜你喜欢 -->
	<guess></guess>
	
	
	<!-- 底部 -->
	<div class="pay_footer">
		<div class="pay_footer_button">
			<button class="cancel_button" @click="cancel_order" v-if="orderState===1">取消订单</button>
			
			<button class="cancel_button" @click="delete_order" v-if="orderState===6">删除订单</button>
			<button class="go_pay" v-if="orderState===1" @click="go_pay_result">去支付</button>
			<button class="go_pay" v-if="orderState===6" >再次购买</button>
		</div>
	</div>
	</div>
	
		</div>
		
</template>

<script>
	
	import { Dialog } from 'vant';
	
	import { Toast } from 'vant';
	
	
	import request from '../../api/request.js'
	export default{
		name:'pay',
		data() {
			return{
				order_info:{},
				orderState:1,
				ids:[]
			}
		},
		 components: {
		    [Dialog.Component.name]: Dialog.Component,
		  },
		mounted() {
			this.get_order_info()
		},
		methods:{
			back() {
				this.$router.back()
			},
			// 获取订单信息
		async get_order_info(){
				let res=await request({
					url:`/member/order/${this.$route.query.id}`,
					method:'get',
					headers:{
						Authorization:localStorage.getItem('token')
					}
				})
				
				this.order_info=res.result
				if(res.result.orderState===1){
					this.orderState=1
				}
			},
			// 取消订单请求
		async	cancel_order_req(){
				let res=await request({
					url:`/member/order/${this.$route.query.id}/cancel`,
					method:'put',
					headers:{
						Authorization:localStorage.getItem('token')
					},
					data:{
						cancelReason:'不想要了'
					}
				})
				this.ids.push(res.result.id)
				if(res.result.orderState===6){
					this.orderState=6
				}
								Toast.success('取消订单成功！');
			},
			// 取消订单
			cancel_order(){
				Dialog.confirm({
				  title: '确认要取消订单吗？',
				
				})
				  .then(() => {
				    this.cancel_order_req()
				  })
				  .catch(() => {
				    // on cancel
				  });
			},
			// 删除订单请求
			async delete_order_req(){
				let res=await request({
					url:'/member/order',
					method:'delete',
					headers:{
						Authorization:localStorage.getItem('token')
					},
					data:{
						ids:this.ids
					}
				})
				console.log(res.result)
			await	Toast.success('删除订单成功！');
				this.$router.push({
					name:'order'
				})
			},
			// 删除订单
			delete_order(){
				Dialog.confirm({
				  title: '确认要删除订单吗？',
				
				})
				  .then(() => {
				    this.delete_order_req()
				  })
				  .catch(() => {
				    // on cancel
				  });
			},
			// 去支付页面
			go_pay_result(){
				this.$router.push({
					name:'pay_result'
				})
			},
		
		}
	}
</script>

<style lang="scss">
	.pay_all{
		width: 100%;
		height: 100%;
		.van-icon-arrow-left:before {
		    content: '\E668';
			color: white;
		}
		.pay_title {
			width: 100%;
			height: 6%;
			
			background-color: #56C2A2;
			display: flex;
			justify-content: center;
			align-items: center;
			
			p {
				color: white;
				font-size: 30px;
			
			}
		}
		.pay_detail{
			width: 100%;
			height: 12%;
			background-color: #56C2A2;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			p{
				width: 100%;
				text-align: center;
				color: white;
				font-size: 26px;
				
			}
			button{
				width: 35%;
				height: 32%;
				border-radius: 60px;
				border: none;
				color:  #58BFA2;
				background-color: #FFFFFF;
				font-size: 26px;
			}
		}
		.pay {
			width: 100%;
			height: 82%;
			padding: 15px;
			box-sizing: border-box;
			background-color: #F7F7F7;
		
			
		
			.pay_address {
				width: 100%;
				height: 10%;
				margin: 20px 0;
				background-color: #FFFFFF;
				border-radius: 10px;
			}
		
			.pay_goods_info {
				margin: 20px 0;
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				width: 100%;
				height: auto;
		
				.goods {
					width: 100%;
					height: 220px;
					background-color: #FFFFFF;
					display: flex;
					margin-bottom: 10px;
					border-radius: 10px;
					box-sizing: border-box;
		
					.goods_img {
						width: 30%;
						height: 100%;
		
						display: flex;
						justify-content: center;
						align-items: center;
		
						img {
							width: 80%;
							height: 80%;
						}
					}
		
					.goods_detail {
						width: 60%;
						height: 100%;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						align-items: flex-start;
		
						.goods_title {
		
							width: 100%;
							height: 40%;
							display: flex;
							justify-content: flex-start;
							align-items: center;
		
							p {
								font-size: 26px;
								padding: 0 10px;
								box-sizing: border-box;
							}
						}
		
						.goods_desc {
							width: 90%;
							height: 40%;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							box-sizing: border-box;
		
							p {
								font-size: 24px;
								padding: 0 10px;
								background-color: #F7F7F7;
								color: #8E8E8E;
							}
						}
		
						.goods_price {
							width: 50%;
							height: 20%;
							display: flex;
							padding-left: 20px;
							box-sizing: border-box;
							justify-content: flex-start;
							align-items: center;
		
							p {
								font-size: 26px;
								color: #AA535C;
							}
		
						}
		
						.goods_num {
							width: 50%;
							height: 20%;
							display: flex;
							padding-left: 20px;
							box-sizing: border-box;
							justify-content: flex-end;
							align-items: center;
		
							p {
								font-size: 26px;
								color: #444444;
							}
		
						}
		
		
					}
				}
			}
		
			
		
			.pay_price {
				margin-top: 20px;
				margin-bottom: 30px;
				width: 100%;
				height: 10%;
				background-color: #FFFFFF;
				border-radius: 10px;
		
				.van-cell__value {
					color: black;
				}
			}
			.pay_order_info{
				width: 100%;
				height: 10%;
				
			}
			.pay_footer{
				width: 100%;
				height: 6%;
				background-color: #FFFFFF;
				position: fixed;
				bottom: 0;
				left: 0;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.pay_footer_button{
					width: 60%;
					height: 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;
					.cancel_button{
						width: 45%;
						height: 80%;
						border-radius: 100px;
						border: 1px solid #C9C9C9;
						background-color: #FFFFFF;
					}
					.go_pay{
						width: 45%;
						height: 80%;
						border-radius: 100px;
						border: none;
						background-color: #5AB79C;
						color: white;
					}
				}
				
			}
		
			
		
		
			
		
		}
	}
	
</style>